<template>
	<view>
		<view class="search" :style="{ backgroundColor: backgroundColor }">
			<view class="search-content" :style="{ 'border-radius': radius + 'px', border: border }">
				<view class="content-box" :class="{ center: mode === 2 }">
					<text class="icon icon-search">&#xe61c;</text>
					<input class="input" :class="{ center: f=='' && mode === 2 }" :focus="isFocus"
						:placeholder="placeholder" v-model="inputVal" @focus="focus" @blur="blur" />
					<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
					<text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe644;</text>
				</view>
				<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')"
					class="searchBtn" @click="search">搜索</view>
			</view>
			<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search">
				<view class="button-item">{{ !show ? searchName : '搜索' }}</view>
			</view>
		</view>
		<view class="holder"></view>

	</view>
</template>

<script>
	export default {
		props: {
			mode: {
				type: Number,
				default: 1
			},
			button: {
				type: String,
				default: 'outside'
			},
			show: {
				type: Boolean,
				default: true
			},
			radius: {
				type: String,
				default: '60'
			},
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			border: {
				type: String,
				default: '1px #f5f5f5 solid'
			},
			val: {
				type: String,
				default: ''
			},
			f: {
				type: Boolean,
				default: false
			}
		},
		updated() {
			this.inputVal = this.val
		},
		data() {
			return {
				active: false,
				inputVal: '',
				searchName: '取消',
				isDelShow: false,
				isFocus: false
			};
		},
		methods: {
			focus() {
				// this.active = true;
				this.$emit("focus")
			},
			blur() {
				this.isFocus = false;
				if (!this.inputVal) {
					this.active = false;
				}
			},
			clear() {
				this.inputVal = '';
				this.active = false;
				this.$emit('search', '');
			},
			getFocus() {
				this.isFocus = true;
			},
			search() {
				if (!this.inputVal) return;
				console.log(this.inputVal);
				this.$emit('search', this.inputVal);
			}
		},
		watch: {
			inputVal(newVal) {
				if (newVal) {
					this.searchName = '搜索';
					this.isDelShow = true;
				} else {
					this.searchName = '取消';
					this.isDelShow = false;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.holder{
		height: 90rpx;
	}
	.search {
		position: fixed;
		display: flex;
		z-index: 10;
		/* #ifdef APP */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 90rpx;
		/* #endif */
		width: 100%;
		border-bottom: 1px #f1f1f1 solid;
		box-sizing: border-box;
		padding: 15rpx;
		font-size: $uni-font-size-base;
		background: #fff;

		.search-content {
			display: flex;
			align-items: center;
			width: 100%;
			height: 70rpx;
			border: 1px #ccc solid;
			background: #fff;
			overflow: hidden;
			transition: all 0.2s linear;
			border-radius: 30px;

			.content-box {
				background: #F1F1F1;
				width: 100%;
				display: flex;
				align-items: center;

				&.center {
					justify-content: center;
				}

				.icon {
					padding: 0 15rpx;

					&.icon-del {
						font-size: 38rpx;
					}
				}

				.input {
					font-size: 20rpx;
					width: 100%;
					max-width: 100%;
					line-height: 80rpx;
					height: 80rpx;
					transition: all 0.2s linear;

					&.center {
						width: 200rpx;
					}

					&.sub {
						// position: absolute;
						width: auto;
						color: grey;
					}
				}
			}

			.searchBtn {
				height: 100%;
				flex-shrink: 0;
				padding: 0 30rpx;
				background: $uni-color-success;
				line-height: 60rpx;
				color: #fff;
				border-left: 1px #ccc solid;
				transition: all 0.3s;
			}
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-shrink: 0;
			width: 0;
			transition: all 0.2s linear;
			white-space: nowrap;
			overflow: hidden;

			&.active {
				padding-left: 15rpx;
				width: 100rpx;
			}
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype');
	}

	.icon {
		font-family: iconfont;
		font-size: 32rpx;
		font-style: normal;
		color: #999;
	}
</style>
